<template>
  <div class="conten">
    <div class="head-img">
      <img :src="bgUrl[titleNum]" alt />
    </div>
    <div class="head">
      <div class="box">
        <div class="box-left" @click="homeChange">
          <img src="../images/lucency-logo.png" alt />
        </div>
        <div class="box-wier"></div>
        <div class="box-centent">
          <div v-for="(item,index) in titleList" :key="index" class="box-centent-item">
            <p
              :style="titleNum==index? 'cursor:pointer;color:#fff;':'cursor:pointer;'"
              @click="titleChange(index)"
            >{{ item }}</p>
            <p class="box-centent-wier" v-show="index!=titleList.length-1"></p>
            <div class="box-centent-item-underline" v-show="titleNum==index"></div>
          </div>
        </div>
        <div class="box-right" @click="myChange" v-if="token">
          <div class="box-right-hint" @click.stop="myLith">
            <img src="../images/hint.png" alt />
            <div class="box-right-hint-num" v-if="msgTotal>0">{{ msgTotal>9? '···':msgTotal }}</div>
          </div>
          <p>{{ nickname }}</p>
          <div class="box-right-img">
            <img :src="avatar" alt height="100%" />
            <!-- <img src="../images/10.png" alt  width="100%"/> -->
          </div>
        </div>
        <div class="box-right" v-if="!token">
          <div class="box-right-box" @click="loginChange">注册/登录</div>
        </div>
      </div>
    </div>
    <!-- 1400 180  1540  200  1640 222  100  21-->
    <!-- <div v-show="titleNum!=4 " :style="'height:'+heightVal+'px; background-color: #fff;'"></div> -->
    <!--1440  510   1540  555  1640 600  45  -->

    <!-- <div v-show="titleNum==4 " :style="'height:'+heightBigVal+'px; background-color:transparent;border:1px solid red;'"></div>、 -->
    <!-- 平台介绍 -->
    <Introduce v-if="titleNum==0" />
    <!-- 案例展示 -->
    <CaseShow v-if="titleNum==1" />
    <!-- 战略伙伴 -->
    <Partner v-if="titleNum==2" :weightVal="weightVal" />
    <!-- 新闻动态 -->
    <DynamicState @change="handleChange($event)" v-if="titleNum==3&&id==''" />
    <!-- 新闻动态详情 -->
    <SingleNews v-if="titleNum==3&&id!=''" :id="id" @getData="getData" />
    <!-- 联系我们 -->
    <ContactUs v-if="titleNum==4" />
    <div :style="titleNum===0||titleNum===1||id? 'background-color: #fff;':''" class="base">
      <div class="base-text">中国数字人知识产权存证保护平台</div>
    </div>
  </div>
</template>

<script>
import { comment_total } from "@/utils/api";
import Introduce from "@/components/display_case/introduce";
import CaseShow from "@/components/display_case/case_show";
import Partner from "@/components/display_case/partner";
import DynamicState from "@/components/display_case/dynamic_state";
import SingleNews from "@/components/display_case/single_news";
import ContactUs from "@/components/display_case/contact_us";

export default {
  name: "headView",
  components: {
    Introduce,
    CaseShow,
    Partner,
    DynamicState,
    SingleNews,
    ContactUs
  },

  data() {
    return {
      screenWidth: null,
      heightVal: 178,
      heightBigVal: 510,
      bgUrl: [
        require("../images/introduce.png"),
        require("../images/case-bg.png"),
        require("../images/partner.png"),
        require("../images/state-logo.png"),
        require("../images/contact.png")
      ],
      routerName: "business",
      avatar: "",
      nickname: "",
      msgTotal: "0",
      token: "",
      titleList: ["平台介绍", "案例展示", "战略伙伴", "新闻动态", "联系我们"],
      titleNum: 0,
      id: "",
      weightVal: 22 //战略伙伴
    };
  },
  beforeCreate() {
    // 滚动条置顶
    document.body.scrollTop = 0; // firefox浏览器中是这句
    document.documentElement.scrollTop = 0;
  },
  created() {
   
    //获取留言条数
    if (localStorage.getItem("token")) {
      comment_total({}, res => {
        localStorage.setItem("msgTotal", res.data);
      });
    }
    //  首页进入
    if (this.$route.params.titleNum) {
      this.titleNum = this.$route.params.titleNum;
      localStorage.setItem("caseNum", this.titleNum);
      // console.log("首页进入", this.$route.params);
    }
    // 首页进入新闻详情
    if (this.$route.params.id) {
      this.id = this.$route.params.id;
      console.log("步骤", this.id);
      localStorage.setItem("caseId", this.id);
    }
    // 刷新仍然保留在当前页
    if (localStorage.getItem("caseNum")) {
      this.titleNum = localStorage.getItem("caseNum");
    }
    // 刷新仍然保留在当前页（新闻详情）
    if (localStorage.getItem("caseId")) {
      this.id = localStorage.getItem("caseId");
    }
    this.avatar = localStorage.getItem("avatar");
    this.nickname = localStorage.getItem("nickname");
    this.msgTotal = localStorage.getItem("msgTotal");
    this.token = localStorage.getItem("token");
    // console.log("token", this.token);

     // 页面头部标题

     
    //  document.title = this.$route.meta.title;
     
     if(this.id){
      document.title =this.titleList[this.titleNum]+'-新闻详情'+'-中国数字人知识产权存证保护平台'
     }else{
      document.title =this.titleList[this.titleNum]+'-中国数字人知识产权存证保护平台'
     }


  },

  mounted() {
    //获取屏幕尺寸
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      // console.log("高度");
      //屏幕尺寸变化
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },

  watch: {
    // 监听头部点击
    titleNum: {
      handler(newVal) {
        localStorage.setItem("caseNum", newVal);
        this.titleNum = newVal;
      },
      deep: true // 深度监听
    },

    // 屏幕宽度
    screenWidth: function(n) {
      console.log("cs", n);
      if (n >= 1440) {
        this.heightVal = 178;
        this.heightBigVal = 510;
        this.heightVal += parseInt((n - 1440) / 4.76);
        this.heightBigVal += parseInt((n - 1440) / 2.22);
        this.weightVal = 22;
        this.weightVal += parseInt((n - 1440) / 25.7);
        console.log(this.heightVal);
      } else {
        this.heightVal = 178;
        this.heightBigVal = 510;
        console.log(this.heightVal);
      }
      this.$forceUpdate(); //强制刷新当前页面
    },
    deep: true,
    immediate: true
  },
  beforeDestroy() {
    localStorage.removeItem("caseId");
  },

  methods: {
    // 接收子组件传值（新闻详情）
    getData(data) {
      this.titleNum = data;
      this.id = "";
 
      console.log("接收子组件传值（新闻详情）", data);
    },
    // logo跳转到首页
    homeChange() {
      this.$router.push({ name: "home" });
    },
    // 头像跳转到个人中心
    myChange() {
      this.$router.push({ name: "datum" });
    },
    myLith() {
      this.$router.push({ name: "datum", params: { id: 2 } });
    },
    //登录页
    loginChange() {
      this.$router.push({ name: "login" });
    },
    // 头部标题选中的那一项
    titleChange(val) {
      this.titleNum = val;
      if (val == 3) {
        this.id = "";
      }
      localStorage.removeItem("caseId");
      document.title =this.titleList[this.titleNum]+'-中国数字人知识产权存证保护平台'
    },
    // 接收新闻动态传值
    handleChange(val) {
      this.titleNum = val.titleNum;
      this.id = val.id;
      localStorage.setItem("caseId", this.id);
      document.title =this.titleList[this.titleNum]+'-新闻详情'+'-中国数字人知识产权存证保护平台'
    }
  }
};
</script>

<style scoped lang="scss">
.conten {
  margin: auto;
  position: relative;
  // border: 2px solid red;
  // min-width: 101vh;
}
.head {
  max-width: 1920px;
  min-width: 1440px;
  margin: auto;
  height: 180px;
  position: relative;
  // outline: 2px solid red;

  &-img {
    position: absolute;
    width: 100%;
    height: 180px;
    overflow: hidden;
    top: 0;
    left: 0px;
    z-index: 0;
    > img {
      width: 100%;
      height: 100%;
    }
  }
}
.box {
  max-width: 1920px;
  min-width: 1440px;
  height: 120px;
  margin: auto;
  display: flex;
  border-bottom: 1px solid #ffffff10;
  &-left {
    // padding-left: 2.1%;
    padding-left: 50px;
    display: flex;
    align-items: center;
    vertical-align: middle;
    width: 29.4%;
    height: 120px;
    cursor: pointer;

    > img {
      width: 100%;
    }
  }
  &-centent {
    width: 50%;
    height: 120px;
    display: flex;
    align-items: center;

    &-item {
      font-weight: 400;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: 3px;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
      &-underline {
        position: absolute;
        width: 28px;
        height: 3px;
        bottom: 0px;
        left: 30px;
        border-radius: 1.5px;
        background-color: #ffffff;
      }
    }
    &-wier {
      width: 1px;
      height: 15px;
      background-color: #dddddd60;
      margin: 0 30px;
    }
  }
  &-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    &-hint {
      margin-right: 20px;
      position: relative;
      cursor: pointer;
      > img {
        width: 21px;
        height: 23px;
      }
      &-num {
        width: 23px;
        height: 23px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: red;
        position: absolute;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 500;
        color: #ffffff;
        top: -8px;
        right: -13px;
        border: 3px solid #3c7dd8;
      }
    }

    > p {
      font-size: 18px;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }
    &-img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      cursor: pointer;
      margin-left: 20px;
      cursor: pointer;
      margin-right: 60px;
      // outline: 2px solid red;
      overflow: hidden;
    }
    &-box {
      width: 140px;
      height: 48px;
      border: 1px solid #ffffff;
      font-size: 18px;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      line-height: 48px;
      cursor: pointer;
      margin-right: 60px;
    }
  }
}
.box-wier {
  width: 1px;
  height: 51px;
  background-color: rgba(247, 244, 244, 0.1);
  margin-top: 35px;
  margin-left: 1.6%;
  margin-right: 1.6%;
}
.base {
  width: 100%;
  color: #999999;
  background-color: #ebf1fb;
  &-text {
    max-width: 1920px;
    min-width: 1440px;
    height: 86px;
    margin: auto;
    text-align: center;
    line-height: 86px;
    font-size: 16px;
    font-weight: 400;
  }
}
</style>
